<template>
  <!-- actio: 指定上传文件的接口地址 -->
  <!-- show-file-list: 是否展示已选择的文件列表 -->
  <!-- before-upload: 用于指定文件上传之前，对文件的校验函数 -->
  <!-- http-request: 指定自定义上传行为的函数 -->
  <el-upload
  class="avatar-uploader"
  action="#"
  :show-file-list="false"
  :before-upload="beforeAvatarUpload"
  :http-request="upload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  <el-progress v-if="isShow" type="circle" :percentage="percentage" class="progress"></el-progress>
</el-upload>
</template>

<script>
var COS = require('cos-js-sdk-v5')
var cos = new COS({
    SecretId: 'AKIDdFvOaVAbeR0JL6bpmS6nJkuoRnsiJdgT',
    SecretKey: 'cwrWu1qPhhPq9ID2dy3rNdlgOp1wg9MI'
})
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
      return {
        // 图片地址
        imageUrl: this.value,
        // 进度条百分比
        percentage: 0,
        // 进度条的显示和隐藏
        isShow: false
      }
  },
  watch: {
    value(newVal) {
      this.imageUrl = newVal
    }
  },
  methods: {
      // 文件校验函数
      beforeAvatarUpload(file) {
          // return true 表示校验通过
          // return false 表示校验不通过
          // file 就是选择出来的文件
          // 校验需求: 上传的头像格式必须是png的图片，大小不能超过2M
          const isPng = file.type === 'image/png'
          const isLt2M = file.size /1024 /1024 < 2
          if(!isPng) {
              this.$message.warning('头像必须是png格式')
          }
          if(!isLt2M) {
              this.$message.warning('头像大小不能超过2M')
          }
          return isPng && isLt2M
      },
      // 自定义上传
     upload (obj) {
      // 显示进度条
      this.isShow = true
      // 完成将图片上传的
      console.log(obj)
      cos.putObject({
        Bucket: 'why-1316654697' /* 填入您自己的存储桶，必须字段 */,
        Region: 'ap-beijing' /* 存储桶所在地域，例如ap-beijing，必须字段 */,
        Key: obj.file.name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
        Body: obj.file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */,
        onProgress:(progressData) => {
            // console.log(JSON.stringify(progressData))
            this.percentage = progressData.percent * 100
        }
      },(err, data) => {
        // 上传成功或失败都会走该函数
        // 隐藏进度条
        this.isShow = false
        // data:上传成功腾讯云返回的结果
        // console.log(err || data)
        this.imageUrl = `https:${data.Location}`
        this.$emit('input',this.imageUrl)
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .progress {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
}
</style>